@charset "utf-8";
@import "comm/reset";
@function p($px){
    @return $px/2+px;
}
.indexWeb{
    //问题页面
    .question{
        background: url(../img/bg.png)no-repeat;
        background-size: cover;
        .slide{
            position: relative;
            overflow: hidden;
            p{
                position: relative;
                bottom: -100%;
                opacity: 0;
                color: white;
                font-size: p(36);
                text-align: center;
            }
            .ts{
                display: flex;
                overflow: hidden;
                justify-content: center;
                margin-top: 20%;
                animation-delay: 2s;
                opacity: 0;
                img{
                    width: p(350);
                    height: p(450);
                }
            }
            .yun{
                position: absolute;
                top: 30%;
                right: -100%;
                width: p(77);
                height: p(56);
                z-index: -1;
                animation-name: yundong;
                animation-duration: 20s;
                animation-iteration-count: infinite;
                img{
                    width: 100%;
                }
            }
            .yun2{
                position: absolute;
                top: 35%;
                right: -100%;
                width: p(77);
                height: p(56);
                z-index: -1;
                animation-name: yundong2;
                animation-duration: 27s;
                animation-delay: 800ms;
                animation-iteration-count: infinite;
                img{
                    width: 100%;
                }
            }
            .yun3{
                position: absolute;
                top: 40%;
                right: -100%;
                width: p(77);
                height: p(56);
                z-index: -1;
                animation-name: yundong3;
                animation-duration: 23s;
                animation-delay: 500ms;
                animation-iteration-count: infinite;
                img{
                    width: 100%;
                }
            }
            .answer{
                position: absolute;
                top: 60%;
                left: 5%;
                ul{
                    li{
                        transform: translateX(-120%);
                        opacity: 0;
                        margin-bottom: p(30);
                       img{
                           width: p(367);
                           height: p(63);
                            &:nth-child(2){
                               position: absolute;
                               left: 0;
                               top: 0;
                               display: none;
                            } 
                        }
                        span{
                           font-size: p(24);
                           font-weight: bold;
                        }
                    }
                    li:hover li>img{
                        display: none;
                    }
                    li:hover img:nth-child(2){
                        display: block;
                    }
                    li:first-child{
                        animation-delay: 3s;
                         img{
                           width: p(367);
                           height: p(63);
                        }
                        span{
                           position: absolute;
                           top: 14%;
                           left: 10%;
                        }
                    }
                    li:nth-child(2){
                        animation-delay: 3.2s;
                         img{
                           width: p(367);
                           height: p(63);
                           &:nth-child(2){
                               position: absolute;
                               left: 0;
                               top: 0;
                            }
                        }
                        span{
                           position: absolute;
                           top: 22%;
                           left: 10%;
                        }
                    }
                    li:nth-child(3){
                        animation-delay: 3.4s;
                         img{
                           width: p(367);
                           height: p(63);
                           &:nth-child(2){
                               position: absolute;
                               left: 0;
                               top: 0;
                            }
                        }
                        span{
                           position: absolute;
                           top: 22%;
                           left: 10%;
                        }
                    }
                    li:nth-child(4){
                        animation-delay: 3.6s;
                         img{
                           width: p(367);
                           height: p(63);
                           &:nth-child(2){
                               position: absolute;
                               left: 0;
                               top: 0;
                            }
                        }
                        span{
                           position: absolute;
                           top: 22%;
                           left: 10%;
                        }
                    }
                }
            }
            .lbpc{
                width: p(111);
                height: p(92);
                position: absolute;
                top: 85%;
                left: 74%;
                iframe{
                    border: 0;
                }
            }
        }
        .resu{
            .logo{
               width: p(103);
               height: p(38);
               margin-top: p(44);
               margin-left: p(44);
               img{
                   width: 100%;
               }
            }
            .resu1{
                width: p(534);
                height: p(846);
                position: absolute;
                top: 15%;
                left: 50%;
                transform: translate(-50%);
                img{
                    width: 100%;
                }
            }
            .resu2{
                width: p(260);
                height: p(333);
                position: absolute;
                top: 65%;
                left: 15%;
                img{
                    width: 100%;
                }
            }
            input{
                width: p(200);
                height: p(71);
                font-style: normal;
                background: #deff00;
                border-radius: p(10);
                position: absolute;
                top: 65%;
                left: 50%;
                color: #384000;
            }
        }
        .evaluate{
            .logo{
               width: p(103);
               height: p(38);
               margin-top: p(44);
               margin-left: p(44);
               img{
                   width: 100%;
               }
            }
            .gou{
                position: absolute;
                top: 12%;
                left: 50%;
                transform: translate(-50%);
                width: p(173);
                height: p(173);
                img{
                    width: 100%;
                }
            }
            .wenz{
                position: absolute;
                top: 26%;
                left: 50%;
                transform: translate(-50%);
                width: p(476);
                height: p(88);
                img{
                    width: 100%;
                }
            }
            .wenz2{
                position: absolute;
                top: 45%;
                left: 5%;
                width: p(308);
                height: p(60);
                img{
                    width: 100%;
                }
            }
        }
    }
}

@keyframes yundong{
    0%{
        right: -10%;
         opacity: 1;
    }
    80%{
        right: 100%;
        opacity: 0;
    }
    100%{
        opacity: 0;
        right: -10%;
    }
}
@keyframes yundong2{
    0%{
        right: -10%;
         opacity: 0.5;
    }
    80%{
        right: 100%;
        opacity: 0;
    }
    100%{
        opacity: 0;
        right: -10%;
    }
}
@keyframes yundong3{
    0%{
        right: -10%;
        opacity: 0.5;
    }
    80%{
        right: 100%;
        opacity: 0;
    }
    100%{
        opacity: 0;
        right: -10%;
    }
}
@media only screen and (min-width:320px) and (max-width: 414px){
    .indexWeb{
        .question{
            .slide{
                .ts{
                    img{
                       width: p(350);
                       height: p(450); 
                    }
                }
            }
        }
    }
}
